import { on } from '@/libs/tools'
import { nextFocus } from '@/libs/ivuDom'

//  默认表单的绑定的modle 为 form  ref 也为 from  如果绑定的不是这种格式则不适用

/**
 * 表单dom事件
 *
 * props:
 *      enterEvent 回车事件调用, return  false  会阻止 自动跳转下一个表单元素 及最后一个元素的提交事件 (可用来处理回车事件带出某些数据)
 *      blurEvent  光标离开调用
 * methods:
 *      handleLastEnter 最后一个表单元素回车触发事件 默认触发 $emit('submit', data) 提交表单数据
 *      focusElement选中表单某个元素 参数为表单元素绑定的name
  *     nextFocus focus 下一个元素
 *      setDisabled 设置表单元素是否可禁用 参数names(type:String,Arrary) status (type:Boolean)
 * deactivated:
 *      blur 自定义光标离开指令
 *
 */
export default {
    props: {
        enterEvent: {
            type: Function
        },
        blurEvent: {
            type: Function
        }
    },
    methods: {
        // 最后一个表单元素触发事件
        handleLastEnter () {
            this.$emit('submit', JSON.parse(JSON.stringify(this.form)))
        },
        // foucs某个表单元素
        focusElement (name, refName = 'form') {
            const dom = this.$refs[refName] ? this.$refs[refName].$el : document
            const target = dom.querySelector(`[name=${name}]`)
            target && target.focus()
        },
        // 设置某个input元素的disabled值
        // names对应表单的name值 多个可用','隔开
        setDisabled (names, status) {
            if (this.$refs.form) {
                const dom = this.$refs.form.$el
                const list = names.split(',')
                list.forEach(name => {
                    const target = dom.querySelector(`input[name=${name}]`)
                    if (target) {
                        status ? target.setAttribute('disabled', 'disabled') : target.removeAttribute('disabled')
                    }
                })
            }
        },
        // 选中下一个节点
        nextFocus (e) {
            if (this.$refs.form) {
                let inputs = this.$refs.form.$el.querySelectorAll('input')
                nextFocus(e, inputs)
            }
        }
    },
    directives: {
        'blur': {
            bind (el, { value }) {
                on(el, 'blur', event => {
                    value && value(event)
                }, true)
            }
        }
    }
}
